<template>
	<view class="bottom">
		<navigator class="bottomView" open-type="redirect" hover-class="none" :class="[buttomIndex == index ? 'buttom_active' : '']" :url="item.url" v-for="(item,index) in bottomList" :key="index">
			<i :class="item.icon"></i>
			<text>{{item.name}}</text>
		</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomList: [
					{name:'首页',icon:'iconfont iconshouye',url:'/pages/shopStore/index'},
					{name:'订单',icon:'iconfont icondingdan',url:'/pages/shopStore/order'},
					{name:'我的',icon:'iconfont iconwode',url:'/pages/shopStore/mine'}
				]
			}
		},
		props: {
			buttomIndex: {
				type: [Number,String],
				default: 0
			}
		},
		created() {
			if(this.buttomIndex == 0) {
				this.bottomList[0].icon = 'iconfont iconshouye-xuanzhong'
			} else if(this.buttomIndex == 1) {
				this.bottomList[1].icon = 'iconfont icondingdan-mian-01'
			} else if(this.buttomIndex == 2) {
				this.bottomList[2].icon = 'iconfont iconwode-xuanzhong'
			}
		}
	}
</script>

<style lang="scss">
	.bottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		border-top: 2upx solid #E5E5E5;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #FFFFFF;
		.bottomView{
			text-align: center;
			height: 100%;
			display: flex;
			flex-flow: column;
			justify-content: center;
			& i {
				color: #666666;
				font-size: 50upx;
				line-height: 1;
			}
			& text{
				color: #666666;
				font-size: 24upx;
				line-height: 1.2;
			}
		}
		.buttom_active {
			i, text {
				color: #FF9900 !important;
			}
		}
	}
</style>
